<template>
	<view class="index-page" style="padding: 0;" :style="{'position': isshow?'fixed':'inherit'}">
		<mescroll-body height="500px" :sticky="true" :down="down" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="stick-tab">
				<searchBar :keynames="keyname"></searchBar>
				<cc-dropDownMenu bgcolor="rgba(0,0,0,0)" activeColor="#FD3530" :titleArr="titleArr" :dropArr="dropArr"
					@finishDropClick="finishClick" @changStyle="changStyle" @screenPopup="screen"></cc-dropDownMenu>
			</view>
			
			<view class="box-content">
				<view class="massagist-list">
					<view class="horizontal-list">
						<horizontalMassage :ismore="true" :isStyle="isStyle" :list="massageList" ref="massage"></horizontalMassage>
					</view>
				</view>
			</view>
			<shaixuanPopup ref="shaixuanPopup" @massageResult="massageResult"></shaixuanPopup>
		</mescroll-body>
	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		mixins:[MescrollMixin],
		data() {
			return {
				isshow: false,
				sortid: 0,
				titleArr: ['综合排序', '筛选项'],
				dropArr: [
					// 区域
					[{
							text: '综合排序',
							value: 0
						},
						{
							text: '销量最高',
							value: 1
						}, {
							text: '好评多',
							value: 2
						},
						{
							text: "上门快",
							value: 3
						},
						{
							text: "价格低",
							value: 4
						}
					]
				],
				filterResultData: [],
				keyname: "",
				sort: 0,
				massageResultData: {},
				down: {
					auto: false
				},
				massageList:[],
				isStyle:false
			}
		},
		onLoad(option) {
			this.keyname = option.key ? option.key : ''
		},
		methods: {
			screen() {
				this.$refs.shaixuanPopup.open()
			},
			massageResult(data) {
				this.page = 1
				this.massageResultData = data
				this.downCallback()
			},
			hideMenu() {
				this.isshow = false
			},
			discard() {

			},
			handleToDetail(info) {
				uni.navigateTo({
					url: '/otherpages/search/searchDetail'
				})
			},
			finishClick(item) {
				this.sort = item[0]
			},
			changStyle() {
				this.isStyle = !this.isStyle
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.massageList = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getServiceList",
					method: "get"
				}, {
					distance: this.massageResultData.slidernum,
					gender: this.massageResultData.slidernum,
					category_id: this.current,
					key: this.keyname ? this.keyname : this.massageResultData.elsename,
					age: this.massageResultData.age,
					sort: this.sort,
					page: page.num,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
					pageSize:10
				}).then(res => {
					if (res.code == 0) {
						that.massageList = [...that.massageList, ...res.data.data]
						that.page++
						that.mescroll.endSuccess(that.massageList.length)
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/css/page.scss';
	.stick-tab{
		position: sticky;
		top: 0;
		background: url('https://qiniu-cdn.maeiyun.com/imgs/indexbg.png')no-repeat;
		background-size: 100%, auto, contain;
		z-index: 99;
	}
	.screening-condition {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.item-screening-condition {
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			view {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.down-icon {
				width: 13rpx;
				height: 8rpx;
				margin-left: 10rpx;
			}

			.screening-icon {
				width: 26rpx;
				height: 28rpx;
				margin-right: 7rpx;
			}

		}
	}
</style>